<template>
  <view class="wrapper" :class="className">
    <slot></slot>
    <view class="auth" v-if="!isLogin" @click="handleLoginClick"></view>
    <login></login>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import login from '../login/login.vue';
export default {
  components: { login },
  data() {
    return {};
  },
  props: ["className"],
  computed: {
    ...mapGetters(["isLogin"]),
  },
  methods: {
    handleLoginClick() {
      if (!this.isLogin) {
        this.$store.dispatch('setShowLogin', true);
      }
    },
  },
};
</script>

<style lang="scss">
.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  .auth {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    top: 0;
    left: 0;
    z-index: 20;
  }
}
</style>